<template>
  <div>
    <BasicTable @register="registerTable">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                icon: 'clarity:add-line',
                tooltip: '添加到模板库',
                onClick: handleAdd.bind(null, record),
              },
            ]"
        /></template>
      </template>
      <template #toolbar>
        <a-button type="primary" @click="reload">更新草稿箱</a-button>
      </template>
    </BasicTable>
    <AddModal @register="registerModal" @reload="reload" />
  </div>
</template>

<script lang="ts" setup>
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import AddModal from './components/addModal.vue';
  import { draftList } from '@/api/version';
  import { getBasicColumns } from './tableData';
  import { useModal } from '@/components/Modal';

  const [registerTable, { reload }] = useTable({
    title: '',
    api: draftList,
    columns: getBasicColumns(),
    useSearchForm: false,
    showTableSetting: true,
    tableSetting: { fullScreen: true },
    showIndexColumn: true,
    clickToRowSelect: false,
    actionColumn: {
      width: 120,
      title: '操作',
      dataIndex: 'action',
    },
  });

  const [registerModal, { openModal }] = useModal();

  async function handleAdd(row) {
    openModal(true, {
      id: row.draft_id,
    });
  }
</script>
